<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>8-事件</title>
    <style>
        [v-cloak] {
            display: none;
        }

        .list {
            width: 100%;
            height: 25px;
            margin-bottom: 10px;
        }

        .list.active {
            background-color: #0000FF;
            color: #FFFFFF;
        }

        .box {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            z-index: 1
        }

        .box.active {
            width: 100px;
            height: 100px;
            background: red
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <ul>
        <li v-bind:class="{list:true,active:item.active}"
            v-for="(item,index) in list"
            v-bind:key="index"
            v-on:click="checkedItem(index)">
            {{item.name}}-<button type="button" v-on:click.stop="delItem(index)">删除</button>
        </li>
    </ul>

    <!--<button type="button" @click.once="submitOrder()">提交订单</button>-->
    <button type="button" @click="submitOrder()">提交订单</button>

    <div v-bind:style="{left:moveX,top:moveY}"
         v-bind:class="{box:true,active:isActive}"
         v-on:mouseover="isActive=true"
         v-on:mouseout="isActive=false"
         v-on:mousemove="moveBox($event)"
         v-on:touchmove="touchmoveBox($event)"
         v-on:touchstart="startBox($event)"
         v-on:touchend="endBox()"></div>

    <input type="text" v-on:keyup.enter="submit($event)" v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                list: [
                    {id: 1, name: "张三", age: 28, active: false},
                    {id: 2, name: "李四", age: 18, active: false},
                    {id: 3, name: "王五", age: 38, active: false}
                ],
                isSubmit: true,
                isActive: false,
                moveX: 0,
                moveY: 100,
                startX: 0,
                startY: 0,
                url: ""
            }
        },
        methods: {
            checkedItem(index) {
                // console.log(index);
                this.list[index].active = !this.list[index].active;
            },
            delItem(index) {
                // console.log("删除");
                if (confirm("确认要删除吗？")) {
                    this.list.splice(index, 1);
                }
            },

            submitOrder() {
                //只提交一次
                if (this.isSubmit) {
                    this.isSubmit = false;
                    alert("提交订单");
                }
            },
            moveBox(e) {
                // console.log(e);
            },
            startBox(e) {
                this.isActive = false
                this.startX = e.touches[0].pageX - parseInt(this.moveX);
                this.startY = e.touches[0].pageY - parseInt(this.moveY);
                // console.log(this.startX,this.startY);
            },
            touchmoveBox(e) {
                this.moveX = e.touches[0].pageX - this.startX + "px";
                this.moveY = e.touches[0].pageY - this.startY + "px";
            },
            endBox() {
                this.isActive = true
            },
            submit(e) {
                // console.log(e);
                window.open(this.url);
            }
        }
    })
</script>
</body>
</html>
